﻿<%@ page language="java" pageEncoding="UTF-8" errorPage="/ui/defaultException.jsp"%>
<%@include file="/ui/tags.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>${hotel.name }周围的旅行度假指南</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <%@include file="/ui/portal/commonjscss.jsp"%>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBXF4z-R35SvrcxQNsQJUd6JIs4X1fAoZw&sensor=false"></script>
</head>
<body>
    <div class="page">
        <c:set var="renderView" value="4" scope="page"></c:set>
		<%@include file="/ui/portal/head.jsp"%>
        <c:set var="resourceType" value="5" scope="page"></c:set>
        <c:if test="${hotel.viewStyle == 1 }">
        <%@include file="/ui/portal/hotel/hotelhead.jsp"%>
        </c:if>
        <c:if test="${hotel.viewStyle == 2 }">
        <div class="hotel-detail-top">
            <div class="hotel-detail-area">
               <c:if test="${dest.hotelEnable eq 0 }"> <b><a
						href="${cpath}/destination/${dest.destId}">${dest.name
							}</a>
					</b> > </c:if><b><a
						href="${cpath}/hotel/destination/${dest.destId}">酒店精选</a></b> >
						<a href="${cpath}/hotel/${hotel.hotelId}">${hotel.name}</a>
            </div>
        </div>
        </c:if>
        <div id="container" class="container margin10">
            <div class="hotel-detail-info">
                <div class="hotel-around-map">
                    <div class="loading">
                    </div>
                </div>
                <div class="hotel-around-map-pop" style="display: none">
                    <div class="hotel-around-map-pop-img">
                        <img src="" />
                    </div>
                    <div class="hotel-around-map-pop-name">巴黎</div>
                    <div class="hotel-around-map-pop-go">
                        <a id="accessNode" href="#">访问目的地</a></div>
                </div>
            </div>
      
            <div class="hotel-around-info">
                <div id="center" style="display: none" data-lat="${hotel.lat }" data-lng="${hotel.lng }"
                    data-title="${hotel.name }" data-relid="${hotel.hotelId }">
                </div>
                <div class="hotel-around-menu2">
                    <ul>
                    	<c:if test="${empty around.curCategory }">
                    		<li class="cur" hover-color="#990033">附近</li>
                    	</c:if>
                    	
                    	<c:if test="${!empty around.curCategory }">
                    		<li hover-color="#990033"><a href="${cpath }/hotel/${hotel.hotelId}/around">附近</a></li>
                    	</c:if>
                        
                        <c:forEach var="c" items="${around.categoryList }">
                        	<c:if test="${c.categoryId == around.curCategory.categoryId }">
                    			<li class="cur" hover-color="${c.categoryColor }">${c.categoryName }</li>
                    		</c:if>
	                    	<c:if test="${c.categoryId != around.curCategory.categoryId  }">
	                    		<li hover-color="${c.categoryColor }"><a href="${cpath }/hotel/${hotel.hotelId}/around?cid=${c.categoryId}">${c.categoryName }</a></li>
	                    	</c:if>
                        </c:forEach>
                        <li class="last"><a href="${cpath }/hotel/${hotel.hotelId}/around-overview">全部</a></li>
                    </ul>
                </div>
                <div class="j-hotel-list2">
                	<c:forEach var="node" items="${around.nodes }" varStatus="status">
                	<c:choose>
	                	<c:when test="${node.categoryId == hotelCategoryId }">
	                		<c:set var="url" value="${cpath}/hotel/${node.relId}"/>
	                	</c:when>
	                	<c:otherwise>
	                		<c:set var="url" value="${cpath}/destination/${node.destId}/item/${node.nodeId}"/>
	                	</c:otherwise>
                	</c:choose>
                    <div class="j-hotel-item2" onclick="openMarkerWindow($(this).attr('data-index'))"
               			 data-lat="${node.lat }" data-lng="${node.lng }"
                         data-title="${node.nodeName }" data-url="${url }"
                         data-img="${image_domain }${node.image}" data-index="${status.count }">
                        <div class="j-hotel-item2-img">
                            <a href="javascript:void(0)">
                                <img src="${image_domain }${node.image}" />
                            </a>
                        </div>
                        <div class="j-hotel-item-title">
                            <a href="javascript:void(0)">${node.nodeName }</a>
                        </div>
                        <div class="j-hotel-item-mark">
                            ${node.distance }km
                        </div>
                    </div>
                    </c:forEach>
                </div>
                <div class="clear">
                </div>
            </div>
            <div class="clear">
            </div>
        </div>
       <%@include file="/ui/portal/footer.jsp"%>
    </div>
    
    <script type="text/javascript">
       	    var infowindow = new google.maps.InfoWindow({
		      maxWidth: 270
		  	});
       		var makerContext = {};
       		var map;
       		//var distanceService = new google.maps.DistanceMatrixService();
       		function initialize(){
       			
       			var center = parseNode($('#center'));
	   	       	if (center.lat == '' && center.lng==''){
	   	       		$(".hotel-around-map").html('暂时没有周边数据，请谅解，数据正在完善中!!!');
	   	       		return;
	   	       	}
	   	       	var jds = $('.j-hotel-item2');
	   	       	var nodes = [];
	   	       	var _i,_len ;
	   	     	for (_i = 0, _len = jds.length; _i < _len; _i++) {
	                var node = parseNode($(jds[_i]));
	                nodes.push(node);
	                makerContext[_i + 1] = node;
	            }
       			renderMap(center,nodes);
       		}
       		
       		function parseNode(jd){
       			return {
       				'lat':jd.attr('data-lat'),
       				'lng':jd.attr('data-lng'),
       				'url':jd.attr('data-url'),
       				'title':jd.attr('data-title'),
       				'img':jd.attr('data-img'),
       				'index':jd.attr('data-index')
       			};
       		}
       		
       		function loadDataAfter(loadDataAfter){
       			if (result && result.center){
       				renderMap(result.center,result.aroundNodes);
   				}
       			else{
       				$("#hotel-around-map").html('暂时没有周边数据，请谅解，数据正在完善中!!!');
       			}
       		}
       		function renderMap(center,aroundNodes){
       			var centerLatLng =  new google.maps.LatLng(center.lat, center.lng);
       			var mapOptions = {
	   	       				zoom:12,
	   	       				center: centerLatLng,
	   	       				scrollwheel:false,
	   	       				//disableDefaultUI: true,
	   	       				mapTypeId: google.maps.MapTypeId.ROADMAP
	   	       		};
       			$(".hotel-around-map").html('');
	   	       	map = new google.maps.Map($(".hotel-around-map")[0],mapOptions); 
	   	       	//添加中心节点
	   	       //	= renderPlace(center, map);
	   	     	//var placeLatLng =  ;
    			var centerMarker = new google.maps.Marker({
    				position : new google.maps.LatLng(center.lat, center.lng),
    				map : map,
    				title:center.title
    			});
	   	     	centerMarker.setIcon({
	   	     	 	origin: new google.maps.Point(0, 0),
	   	     		anchor:new google.maps.Point(32,32),
	   	     		size : new google.maps.Size(64,64),
	   	     		url:"${cpath}/resources/portal/img/center.png"
	   	     	});
	   	     	//centerMarker.setDraggable(true);
	   	    	// centerMarker.setDraggable(false);
	   	       	//绑定节点的事件
	   	     	//bindMarkerListener(center, centerMarker, map);
	   	       	var bounds = new google.maps.LatLngBounds();
	   	     	bounds.extend(centerMarker.getPosition());
	   	       	//添加周边节点
	   	       	var index = 0;
	   	       	for ( var i in aroundNodes) {
					var place = aroundNodes[i];
					//渲染节点
					var placeMarker = renderPlace(place, map);
					place.marker = placeMarker;
					bounds.extend(placeMarker.getPosition());
					//渲染中心节点与周边节点的连线
					//var line = renderPlaceLine(centerMarker, placeMarker, map);
					//绑定周边节点的事件
					bindMarkerListener(place);
				}
	   	     	map.fitBounds(bounds);
       		}
       		
       		function renderPlace(place,map){
       			var placeLatLng =  new google.maps.LatLng(place.lat, place.lng);
       			var marker = new google.maps.Marker({
       				position : placeLatLng,
       				map : map,
       				title:place.title
       			});
       			marker.setIcon({
	   	     	 	origin: new google.maps.Point(0, 0),
	   	     		anchor:new google.maps.Point(14,38),
	   	     		size : new google.maps.Size(28,38),
	   	     		url:"${cpath}/resources/portal/img/googlemap/"+place.index+".png"
	   	     	});
       			return marker;
       		}
       		
       		function renderPlaceLine(startMarker,endMarker,map){
       			var lineSymbol = {
       			  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
       			};
       			//添加线
       			var line = new google.maps.Polyline({
       			  path : [startMarker.getPosition(),endMarker.getPosition()],
       			  strokeColor : 'blue',
       			  strokeOpacity : 1.0,
       			  strokeWeight : 2,
       			  icons: [{
       			    icon: lineSymbol,
       			    offset: '100%'
       			  }],
       			  map: map
       			});
       			return line;
       		}
       		
       		function bindMarkerListener(place){
       			google.maps.event.addListener(place.marker,'click',function(){
       				openMarkerWindow(place.index);
       			});
       		}
       		
       		function openMarkerWindow(index){
       			var place = makerContext[index];
       			var placeWindow = $(".hotel-around-map-pop");
       			$(".hotel-around-map-pop-img").html('<a href='+place.url+'><img src='+place.img+' /></a>');
       			$(".hotel-around-map-pop-name").html('<a href='+place.url+'>' +place.title+'</a>');
       			$(".hotel-around-map-pop-go").html('<a href='+place.url+'>访问详细</a>');
       			infowindow.setContent("<div class='hotel-around-map-pop'>"+placeWindow.html()+"</div>");
   				infowindow.open(map,place.marker);
       			
       		}
       		//初始化周边地图
       		google.maps.event.addDomListener(window, 'load', initialize);
       		</script>
        <script type="text/javascript">
        $(function () {
            $(".hotel-around-menu2 ul li").hover(function () {

                $(this).css("background-color", $(this).attr("hover-color"));
            }, function () {
                if ($(this).attr("class") == "cur") {

                } else {
                    $(this).css("background-color", "");
                }
            });
            $(".j-hotel-item2").click(function () {
                $(".j-hotel-item2").removeClass("itemselect");
                $(this).addClass("itemselect");
            });
            $(".cur", ".hotel-around-menu2 ul").css("background-color", $(".cur", ".hotel-around-menu2 ul").attr("hover-color"));
        });
      </script>
</body>
</html>
